/**
* 模版
**/ 

<template>
  <div class="addQ">
    <h3 style="text-align: center">添加多选试题</h3>
    <el-form ref="form"
             :model="form"
             label-width="80px">

      <el-form-item label="题干内容">
        <el-input type="textarea"
                  v-model="form.topic"></el-input>
      </el-form-item>
      <el-form-item label="选择题库">
        <el-select v-model="form.sub"
                   placeholder="请选择科目">
          <el-option v-for="subb in allSub"
                     :value="subb"
                     :key="subb"></el-option>
          <!-- <el-option label="数学"
                   value="数学"></el-option>
        <el-option label="英语"
                   value="英语"></el-option> -->
        </el-select>
        <el-select v-model="form.grade"
                   placeholder="请选择年级">
          <el-option v-for="gradee in allGrade"
                     :value="gradee"
                     :key="gradee"></el-option>
          <!-- <el-option label="二年级"
                   value="二年级"></el-option>
        <el-option label="三年级"
                   value="三年级"></el-option>
        <el-option label="四年级"
                   value="四年级"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="选择难度">
        <el-radio v-model="form.nandu"
                  label="简单">简单</el-radio>
        <el-radio v-model="form.nandu"
                  label="普通">普通</el-radio>
        <el-radio v-model="form.nandu"
                  label="困难">困难</el-radio>

      </el-form-item>
      <el-form-item label="题目状态">
        <el-switch v-model="form.status"></el-switch>
      </el-form-item>
      <el-form-item label="题目选项">
        <el-checkbox-group v-model="form.daan">
          <el-checkbox label=1>
            <el-input v-model="form.option1"></el-input>
          </el-checkbox>
          <el-checkbox label=2>
            <el-input v-model="form.option2"></el-input>
          </el-checkbox>
          <el-checkbox label=3>
            <el-input v-model="form.option3"></el-input>
          </el-checkbox>
          <el-checkbox label=4>
            <el-input v-model="form.option4"></el-input>
          </el-checkbox>

        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="题目解析">
        <el-input type="textarea"
                  v-model="form.analysis"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="submit1">立即创建试题</el-button>

      </el-form-item>
    </el-form>
    <el-dialog :title="editForm.title"
               :visible.sync="editFormVisible"
               width="30%"
               @click="closeDialog">
      <el-form label-width="120px"
               :model="editForm"
               ref="editForm">
        <el-form-item label="题干内容:"
                      label-width="123px"
                      prop="editForm.topic">
          {{editForm.topic}}
        </el-form-item>

        <el-form-item label="选项1:"
                      label-width="105px"
                      prop="editForm.option1">
          {{editForm.option1}}

        </el-form-item>
        <el-form-item label="选项2:"
                      label-width="105px"
                      prop="editForm.option2">
          {{editForm.option2}}

        </el-form-item>

        <el-form-item label="选项3:"
                      label-width="105px"
                      prop="editForm.option3">
          {{editForm.option3}}
        </el-form-item>
        <el-form-item label="选项4:"
                      label-width="105px"
                      prop="editForm.option4">
          {{editForm.option4}}
        </el-form-item>
        <el-form-item label="答案:"
                      label-width="95px"
                      prop="editForm.daan">
          {{editForm.daan}}
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button size="small"
                   @click="closeDialog">取消</el-button>
        <el-button size="small"
                   type="primary"
                   class="title"
                   @click="submit2">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { addOption, addQuestion } from '../../../api/questionMG'
import { findGrade, findSub } from '../../../api/questionMG'
// 导入组件
// import headerComponent from "./head.vue";
// 导出模块
export default {
  // 模块名字
  name: 'duoxuan',
  // 模块数据
  data() {
    //数据
    return {
      form: {
        tid: 2,
        topic: '',
        sub: '',
        grade: '',
        nandu: '',
        daan: [],
        analysis: '',
        option1: '',
        option2: '',
        option3: '',
        option4: '',
      },
      editFormVisible: false,
      editForm: {
        title: '请再次确认试题信息',
        topic: '',
        option1: '',
        option2: '',
        option3: '',
        option4: '',
        daan: '',
      },
      allGrade: [],
      allSub: [],
    }
  },
  // 注册组件
  components: {
    // headerComponent
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    submit1() {
      this.editFormVisible = true
      this.editForm.topic = this.form.topic
      this.editForm.option1 = this.form.option1
      this.editForm.option2 = this.form.option2
      this.editForm.option3 = this.form.option3
      this.editForm.option4 = this.form.option4
      let daann = ''
      for (let i = 0; i < this.form.daan.length; i++) {
        console.log(this.form.daan[i])
        switch (this.form.daan[i]) {
          case '1':
            daann = daann + '选项1 '
            break
          case '2':
            daann = daann + '选项2 '
            break
          case '3':
            daann = daann + '选项3 '
            break
          case '4':
            daann = daann + '选项4 '
        }
      }
      this.editForm.daan = daann
    },
    clean() {
      location.reload()
    },
    submit2() {
      console.log(this.form)

      addQuestion(this.form).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data.code)
          alert('添加成功')
        }
      })
      this.editFormVisible = false
    },
    closeDialog() {
      this.editFormVisible = false
    },
  },
  created() {
    findGrade().then((res) => {
      console.log(res)
      this.allGrade = res.data
    }),
      findSub().then((res) => {
        console.log(res)
        this.allSub = res.data
      })
  },
  onSubmit() {},
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>
// scoped 样式只在本组件使用
<style scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
</style>
